<template>
	<transition name="Tabber" mode="out-in">
		<kui-tabber v-show="IfTabbar">
			<kui-tabber-item :toPath="`/home`">
				<i slot="icon-normal" class="Kui Kui-shouye"></i>
				首页
			</kui-tabber-item>
			<kui-tabber-item :toPath="`/more`">
				<i slot="icon-normal" class="Kui Kui-iconfontgengduo"></i>
				更多
			</kui-tabber-item>
			<kui-tabber-item :toPath="`/about`">
				<i slot="icon-normal" class="Kui Kui-guanyu"></i>
				关于
			</kui-tabber-item>
		</kui-tabber>
	</transition>
</template>

<script>
	import kuiTabber from './kui-tabbar';
	import kuiTabberItem from './kui-tabbarItem';
	export default {
		name: "index",
		components: {
			'kui-tabber':kuiTabber,
			'kui-tabber-item':kuiTabberItem,
		},
		props:{
		
		},
		data() {
			return {
				IfTabbar:{
					type: Boolean,
					default:true
				}
			}
		},
		watch:{
			$route(to, from) {
				//console.log(to);
				//console.log(from);
				if(to.meta.tabbar == false){
					this.IfTabbar = to.meta.tabbar
				}else {
					this.IfTabbar = true
				}
			}
		},
		mounted() {
		}
	}
</script>

<style scoped>
	@keyframes show {
		0% {
			opacity: 0;
			transform: translateY(100px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	@keyframes hide {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	.Tabber-enter-active {
		animation: show .5s;
	}
	.Tabber-leave-active {
		animation: hide .5s;
	}
	.Tabber-enter, .Tabber-leave-to {
		opacity: 0;
	}
</style>